﻿@using MML.Helpers.Knockout;
@model AppSCO.Models.citaModel
@{
    ViewBag.Title = "generar";
    var ko = Html.CreateKnockoutContext();
}

<h1>GENERAR CITA ONLINE</h1>
<form id="formularioCITA" name="formularioCITA">
<!-- <form id="formularioCITA" name="formularioCITA"> -->

    <ul class="tabs">
        <li id="tb1"><a href="#tab1">INFORMACION</a></li>
        <li id="tb2"><a href="#tab2">PROGRAMACION</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <table border="0" class="formulario" data-bind="with: datosPaciente">
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.DNIPAC)</td>
                    <td><input id="DNIPAC" name="DNIPAC" style="width:200px;" data-bind="value: DNIPAC" type="text" />&nbsp;&nbsp;<button data-bind="click: viewModel.datosPacientePorDNI">BUSCAR</button></td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.NOMPAC)</td>
                    <td><span id="NOMPAC" data-bind="text: NOMPAC"></span></td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.APEPPAC)</td>
                    <td><span id="APEPPAC" data-bind="text: APEPPAC"></span></td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.APEMPAC)</td>
                    <td><span id="APEMPAC" data-bind="text: APEMPAC"></span></td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.FECNACPAC)</td>
                    <td><span id="FECNACPAC" data-bind="text: FECNACPAC"></span></td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.SEXPAC)</td>
                    <td><span id="SEXPAC" data-bind="text: SEXPAC"></span></td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.listaDistrito)</td>
                    <td><select id="CODDIS" name="CODDIS" style="width:200px" data-bind="options: listaDistrito, optionsValue: 'Value', optionsText: 'Text', optionsCaption: '(TODOS)', value: CODDIS"></select></td>
                    <td style="text-align:left;"></td>
                </tr>           
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.TELHPAC)</td>
                    <td><input id="TELHPAC" name="TELHPAC" data-bind="value: TELHPAC" type="text"/> </td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.TELCPAC)</td>
                    <td><input id="TELCPAC" name="TELCPAC" data-bind="value: TELCPAC" type="text"/> </td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.CORPAC)</td>
                    <td><input id="CORPAC" name="CORPAC" style="width:300px;" data-bind="value: CORPAC" type="text"/> </td>
                    <td style="text-align:left;"></td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(c=>c.datosPaciente.DIRPAC)</td>
                    <td><input id="DIRPAC" name="DIRPAC" style="width:500px;" data-bind="value: DIRPAC" type="text"/> </td>
                    <td style="text-align:left;"></td>
                </tr>
            </table>

            <table class="formulario" data-bind="with: datosCita">
                <tr>
                    <td>@Html.LabelFor(c=>c.datosCita.listaEmpresa)</td>
                    <td><select id="CODEMP" name="CODEMP" style="width:200px" data-bind="options: listaEmpresa, optionsValue: 'Value', optionsText: 'Text', optionsCaption: '(TODOS)', value: CODEMP"></select></td>
                </tr>   
                <tr>
                    <td>@Html.LabelFor(c=>c.datosCita.listaOcupacion)</td>
                    <td><select id="CODOCU" name="CODOCU" style="width:200px" data-bind="options: listaOcupacion, optionsValue: 'Value', optionsText: 'Text', optionsCaption: '(TODOS)', value: CODOCU"></select></td>
                </tr>  
                <tr>
                    <td>@Html.LabelFor(c=>c.datosCita.MANALI)</td>
                    <td>
                        <input type="checkbox" data-bind="checked: MANALI" name="MANIPULADOR"/>
                    </td>
                </tr>  
            </table>

            <div style="text-align:center;">
                <button onclick="javascript:return validaRegistro();">SIGUIENTE</button>
            </div>
        </div>
        <div id="tab2" class="tab_content">
            <div data-bind="with: datosCita">
                <table class="formulario"  style="width:700px;">
                    <tr>
                        <td style="width:120px;">@Html.LabelFor(c=>c.datosCita.TIPPAG)</td>
                        <td>
                            <input type="radio" data-bind="checked: TIPPAG" value="B" name="TP" />BANCO NACION&nbsp;&nbsp;&nbsp;&nbsp;
                           <!-- <input type="radio" data-bind="checked: TIPPAG" value="M" name="TP"/>MUNICIPALIDAD DE LIMA -->
                           &nbsp;&nbsp;<a id="printComprobante" href="@Url.Action("pasarela","pagos")" name="shadow" rel="shadowbox[0];width=700;height=600;">PAGAR EN LINEA</a>     
                        </td>
                    </tr>
                    <tr>
                        <td>@Html.LabelFor(c=>c.datosCita.NUMDOCPAG)</td>
                        <td><input id="NUMDOCPAG" name="NUMDOCPAG" style="width:200px;" data-bind="value: NUMDOCPAG" type="text" />&nbsp;<button data-bind="click: viewModel.verDatosPago">VERIFICA</button></td>
                    </tr>
                    <tr>
                        <td>@Html.LabelFor(c=>c.datosCita.MONPAG)</td>
                        <td>S/.<span data-bind="text: MONPAG"></span></td>
                    </tr>
                    <tr>
                        <td>@Html.LabelFor(c=>c.datosCita.FECCITA)</td>
                        <td><input id="FECCITA" name="FECCITA" style="width:100px;" data-bind="value: FECCITA" type="text" />&nbsp;&nbsp;<button data-bind="click: viewModel.verDisponibilidad">BUSCAR</button></td>
                    </tr>
                </table><br />
                <table class="grilla" style="width:600px;">
                    <thead>
                        <tr>
                            <th>HORARIO</th>
                            <th>CUPOS</th>
                            <th>ESTADO</th>
                            <th>SELECT</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: listaHorario">
                        <tr>
                            <td><span data-bind="text: DESHOR"></span></td>
                            <td><span data-bind="text: CUP"></span></td>
                            <td><span data-bind="text: DESCUP"></span></td>
                            <td><input type="radio" data-bind="value: CODHOR, checked: viewModel.HORSELECT" name="DISP" /></td>
                        </tr>
                    </tbody>
                    <tfoot data-bind="visible: viewModel.dontResult">
                        <tr>
                            <td colspan="4">NO SE ENCONTRARON HORARIOS DISPONIBLES</td>
                        </tr>
                    </tfoot>
                </table><br />
                <div style="text-align:center;">
                    <button onclick="javascript:validaFormulario();" data-bind="click: viewModel.generarCita">GENERAR CITA</button>
                    <!-- <button data-bind="click: viewModel.PRUEBA">PRUEBA</button> -->
                </div>
            </div>
        </div>
    </div>
</form>
<!-- </form> -->

@ko.Initialize(Model)
<script type="text/javascript">
    var urlPacientePorDNI = '@Url.Action("datosPacientePorDNI","citas")';
    var urlDatosPago = '@Url.Action("datosPagoSAT","citas")';
    var urlDisponibilidad = '@Url.Action("listarDisponibilidad","citas")';
    var urlGenerarCitaEnLinea = '@Url.Action("generarCita","citas")';
    var urlVerFicha = '@Url.Action("cita","file")';
    var validacion = false;
    viewModel.datosPacientePorDNI = function () {
       
        var param = ko.toJSON(viewModel.datosPaciente);
        $.ajax({
            url: urlPacientePorDNI,
            type: "POST",
            async: true,
            data: param,
            contentType: "application/json",
            success: function (result) {
                if (result.datosPaciente == null) {
                    alert("No se encontraron sus datos verifique y vuelva a intentarlo");
                } else {
                    ko.mapping.fromJS(result.datosPaciente, {}, viewModel.datosPaciente);
                }
            },
            error: msgError
        });
        
    }


    viewModel.verDatosPago = function () {
        var param = ko.toJSON(viewModel.datosCita);
        $.ajax({
            url: urlDatosPago,
            type: "POST",
            async: true,
            data: param,
            contentType: "application/json",
            success: function (result) {
                if (result.datosPago == null) {
                    alert("El documento no existe. Verifique y vuelva a intentarlo");
                } else {
                    ko.mapping.fromJS(result.datosPago, {}, viewModel.datosCita);
                }
            },
            error: msgError
        });
    }

    viewModel.dontResult = ko.observable(true);
    viewModel.verDisponibilidad = function () {
        var param = ko.toJSON(viewModel.datosCita);
        $.ajax({
            url: urlDisponibilidad,
            type: "POST",
            async: true,
            data: param,
            contentType: "application/json",
            success: function (result) {
                ko.mapping.fromJS(result.datosDisponibilidad, {}, viewModel.datosCita.listaHorario);
                viewModel.dontResult(false);
            },
            error: msgError
        });
    }

    viewModel.PRUEBA = function () {
    }

    viewModel.HORSELECT = ko.observable();
    viewModel.generarCita = function () {
        if (validacion) {
            if (!confirm("¿ Desea generar su cita en linea ?")) { return false; }
            if (viewModel.datosCita.MANALI() == null || viewModel.datosCita.MANALI() == "")
                viewModel.datosCita.MANALI(false)
            viewModel.datosCita.CODHOR(viewModel.HORSELECT());
            var param = ko.toJSON(viewModel);
            $.ajax({
                url: urlGenerarCitaEnLinea,
                type: "POST",
                async: false,
                data: param,
                contentType: "application/json",
                success: function (result) {
                    if (result.tipo == "1") {
                        var COD = result.datoCita.CODCIT;
                        alert(result.mensaje);
                        openPopup(urlVerFicha + "?Id=" + COD, "", 750, 600);
                        ko.mapping.fromJS(viewModelJs, {}, viewModel);
                    } else {
                        alert(result.mensaje);
                    }
                },
                error: msgError
            });
        } else {
            alert("Debe llenar todos los campos obligatorios.");
        }
    }

    $(function () {
        var fechaActual = new Date();
        fechaActual = fechaActual.Add("D", 1);
        $("#FECCITA").datepicker({
            minDate: $.datepicker.parseDate('yymmdd', fechaActual.formatDate("yyyyMMdd")),
            beforeShowDay: function (day) {
                var day = day.getDay();
                if (day == 0 || day == 6) return [false, "somecssclass"]
                else return [true, "someothercssclass"]
            }
        });

        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        var form = $("#formularioCITA");
        form.validate({
            rules: {
                DNIPAC: {
                    required: true,
                    number: true
                },
                CODDIS: {
                    required: true
                },
                TELHPAC: {
                    required: true,
                    number: true
                },
                TELCPAC: {
                    required: true,
                    number: true
                },
                CORPAC: {
                    required: true,
                    email: true
                },
                DIRPAC: {
                    required: true
                },
                NUMDOCPAG: {
                    required: true,
                    number: true
                },
                FECCITA: {
                    required: true
                },
                CODEMP: {
                    required: true
                },
                CODOCU: {
                    required: true
                }
            }
        });
    });

    function validaRegistro() {
        var form = $("#formularioCITA");
        if (form.valid()) {
            validacion = true;
            Navigate("tb1", "tb2");
        } else
            validacion = false;
        return validacion;
    }

    function validaFormulario() {
        var form = $("#formularioCITA");
        if (form.valid())
            validacion = true;
        else
            validacion = false;
    }
 

</script>
@ko.Apply(Model)